import {Component, OnInit} from '@angular/core';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {NavigationMoudel} from '../navigation-moudel';
import {NzMessageService} from 'ng-zorro-antd';
import {NavigationService} from '../navigation.service';
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';

@Component({
    selector: 'app-show',
    templateUrl: './show.component.html',
})
export class ShowComponent implements OnInit {
    navigationForm: FormGroup;

    stairDisable = true;
    accessDisable = true;

    listOfStair = [];
    listOfAccess = [];

    isCheckedd = false;

    navigationMoudel: NavigationMoudel = new NavigationMoudel();

    acticonListline = ['anticon anticon-appstore-o',
        'anticon anticon-home',
        'anticon anticon-bars',
        'anticon anticon-setting',
        'anticon anticon anticon-file',
        'anticon anticon-mail',
        'anticon anticon-picture',
        'anticon anticon-contacts',
        'anticon anticon-calendar',
        'anticon anticon-idcard',
        'anticon anticon-safety',
        'anticon anticon-shop',
        'anticon anticon-message',
        'anticon anticon-star-o',
        'anticon anticon-heart-o',
        'anticon anticon-unlock',
        'anticon anticon-lock',
        'anticon anticon-user',
    ];
    acticonList = [];

    constructor(private fb: FormBuilder,
                private msg: NzMessageService,
                private location: Location,
                private navigationService: NavigationService,
                private activityRoute: ActivatedRoute,) {
        this.navigationForm = this.fb.group({
            href: [''],
            sort: [''],
            title: ['', Validators.required],
            type: ['0', Validators.required],
            icon: [''],
            id: ['0'],
            parentId: [''],
            access: [''],
        });
    }

    ngOnInit() {
        const num = Math.ceil(this.acticonListline.length / 6.0);
        for (let i = 0; i < num; i++) {
            this.acticonList.push(
                this.acticonListline.splice(0, 6)
            );
        }

        console.log(JSON.stringify(this.acticonList));

        const id = this.activityRoute.snapshot.paramMap.get('id');
        console.log('====================' + id);
        if (id) {
            this.navigationService.showNavigation(id).subscribe(res => {
                this.navigationMoudel.id = res['id'];
                this.navigationMoudel.href = res['href'];
                this.navigationMoudel.title = res['title'];
                this.navigationMoudel.icon = res['icon'];
                this.navigationMoudel.sort = res['sort'];
                this.navigationMoudel.parentId = res['parentId'];
                this.navigationMoudel.type = res['type'];

                this.navigationForm.patchValue({
                    id: this.navigationMoudel['id'],
                    href: this.navigationMoudel['href'],
                    icon: this.navigationMoudel['icon'],
                    sort: this.navigationMoudel['sort'],
                    title: this.navigationMoudel['title'],
                    parentId: this.navigationMoudel['parentId'] + '',
                    type: this.navigationMoudel['type'] + '',
                });

                this.showNavigation(this.navigationMoudel.type);
            });
        }
    }

    /**
     * 选中图标回调
     * @param icon 图标
     */
    selectIcon(icon) {
        console.log(icon);
        this.navigationForm.patchValue({icon: icon});

        for (let i = 0; i < this.acticonListline.length; i++) {
            console.log(icon === this.acticonListline[i]);
            if (icon === this.acticonListline[i]) {
                this.isCheckedd = true;
            } else {
                this.isCheckedd = false;
            }
        }
    }

    isChecked() {
        return this.isCheckedd;
    }

    setStyle() {
        const styles = {
            'color': this.isChecked() ? 'white' : '#555',
            'background': this.isChecked() ? '#108ee9' : 'white',
        };
        return styles;
    }

    /**
     * 显示菜单详情
     * @param $event
     */
    showNavigation($event) {
        if ($event === '0') { // 一级菜单
            this.stairDisable = true;
            this.accessDisable = true;
        } else if ($event === '1') {
            this.navigationService.getNavigationListByType(($event - 1) + '').subscribe(res => {
                this.listOfStair = res['list'];
            });
            this.stairDisable = false;
            this.accessDisable = true;
        } else if ($event === '2') {
            this.navigationService.getNavigationListByType(($event - 2) + '').subscribe(res => {
                this.listOfStair = res['list'];
            });
            this.navigationService.getNavigationListByParentId($event, this.navigationMoudel['parentId']).subscribe(res => {
                this.listOfAccess = res['list'];
            });
            this.stairDisable = false;
            this.accessDisable = false;
        }
    }

    /**
     * 菜单类型
     * @param $event
     */
    changeType($event) {
        console.log($event);
        this.navigationMoudel['type'] = $event;
        if ($event === '0') { // 一级菜单
            this.stairDisable = true;
            this.accessDisable = true;
        } else if ($event === '1') {
            this.navigationService.getNavigationListByType(($event - 1) + '').subscribe(res => {
                this.listOfStair = res['list'];
            });
            this.stairDisable = false;
            this.accessDisable = true;
        } else if ($event === '2') {
            this.navigationService.getNavigationListByType(($event - 2) + '').subscribe(res => {
                this.listOfStair = res['list'];
            });
            this.stairDisable = false;
            this.accessDisable = false;
        }
    }

    /**
     * 二级菜单
     * @param $event
     */
    changeStair($event) {
        this.navigationMoudel['parentId'] = $event;
        this.navigationService.getNavigationListByParentId($event, this.navigationMoudel['parentId']).subscribe(res => {
            this.listOfAccess = res['list'];
        });
    }

    /**
     * 三级菜单
     * @param $event
     */
    changeAccess($event) {
        this.navigationMoudel['parentId'] = $event;
    }

    /**
     * 提交
     */
    save() {
        const res = this.navigationForm.value;
        this.navigationMoudel['id'] = res['id'];
        this.navigationMoudel['icon'] = res['icon'];
        this.navigationMoudel['href'] = res['href'];
        this.navigationMoudel['title'] = res['title'];
        this.navigationMoudel['sort'] = res['sort'];
        console.log(JSON.stringify(this.navigationMoudel));
        this.navigationService.addNavigation(this.navigationMoudel).subscribe(r => {
            this.msg.success('提交成功');
            this.location.back();
        }, e => {
            // this.msg.success('提交失败');
        });
    }
}
